<template>
  <div>
    <el-card>
      <div>
        <!--主页视图区域-->
        <!--图片区域-->
        <div>
          <div class="condition">
            <div class="text1">填写条件</div>
          </div>
          <div class="bg-card">
            <el-form :inline="true">
              <el-form-item label="年度">
                <el-date-picker
                  style="width:180px;"
                  v-model="years"
                  type="year"
                  value-format="yyyy"
                  format="yyyy"
                  placeholder="选择年"
                ></el-date-picker>
              </el-form-item>
              <el-form-item label="月份">
                <el-date-picker
                  style="width:180px;"
                  v-model="month"
                  type="month"
                  placeholder="选择月"
                  format="MM"
                  value-format="MM"
                ></el-date-picker>
              </el-form-item>
              <el-form-item label="入库时间">
                <el-date-picker
                  v-model="inboundTime"
                  type="date"
                  format="yyyyMMdd"
                  value-format="yyyyMMdd"
                  :picker-options="pickerOptions"
                  placeholder="选择日期"
                ></el-date-picker>
              </el-form-item>
              <el-form-item
                prop="scarpType"
                label="货品状态"
                v-if="type !== 'view'"
              >
                <el-select v-model="type" :value="1">
                  <el-option
                    v-for="item in StockTypeOpt"
                    :key="item.index"
                    :label="item.value"
                    :value="item.index"
                  ></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="货品编号">
                <el-input
                  v-model="query.goodsId01"
                  @keyup.enter.native="fetch"
                ></el-input>
              </el-form-item>
              <el-form-item label="货品名称">
                <el-input
                  v-model="query.goodsName"
                  @keyup.enter.native="fetch"
                ></el-input>
              </el-form-item>
              <el-form-item label="单位">
                <el-input
                  v-model="query.goodsUnit"
                  @keyup.enter.native="fetch"
                ></el-input>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" style="margin-top:28px" @click="fetch"
                  >查询</el-button
                >
              </el-form-item>
              <el-form-item>
                <el-button type="primary" style="margin-top:28px" @click="handleDow">导出</el-button >
              </el-form-item>
            </el-form>
          </div>
        </div>
        <br />
        <el-table :data="newlist" border style="width: 100%">
          <el-table-column
            type="index"
            label="序号"
            width="60"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="goodsId01"
            label="货品编号"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="goodsName"
            label="货品名称"
            align="center"
          ></el-table-column>
          <el-table-column label="年份" align="center">
            <template slot-scope="{ row }">
              <span>{{
                row.inboundTime ? row.inboundTime.substring(0, 4) : ""
              }}</span>
            </template>
          </el-table-column>
          <el-table-column label="月份" align="center">
            <template slot-scope="{ row }">
              <span>{{
                row.inboundTime ? row.inboundTime.substring(4, 6) : ""
              }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="wareHouse" label="仓库" align="center">
            <template slot-scope="{ row }">
              <span>{{ goodsWareHouse[row.wareHouse] }}</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="goodsUnit"
            label="单位"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="specification"
            label="货品规格型号"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="goodsNum"
            label="数量"
            align="center"
          ></el-table-column>
          <el-table-column prop="waringValue" label="最低库存数" align="center">
            <template slot-scope="{ row }">
              <span>{{ row.waringValue ? row.waringValue : '未填写' }}</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="inboundTime"
            label="入库时间"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="goodsPrime"
            label="保存期限"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="nightContent"
            label="操作"
            align="center"
            widthData="300"
            fixed="right"
            width="400"
          >
            <template slot-scope="scope">
              <el-button
                @click="
                  selectIdx = scope.$index;
                  printShow = true;
                "
                type="primary"
                size="mini"
              >
                打印
              </el-button>
              <el-button
                type="success"
                size="mini"
                style="margin-left:30px"
                @click="handleShow(scope.row)"
                >修改最低库存数</el-button
              >
              <el-dropdown size="mini" split-button type="primary" style="margin-left:30px">
                货品操作
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item>
                    <el-link @click="handle(1, scope.row.goodsId01)">货品出库</el-link>
                  </el-dropdown-item>
                  <el-dropdown-item>
                    <el-link @click="handle(2, scope.row.goodsId01)">货品报废</el-link>
                  </el-dropdown-item>
                  <el-dropdown-item>
                    <el-link @click="handle(3, scope.row.goodsId01)">货品盘点</el-link>
                  </el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </template>
          </el-table-column>
        </el-table>
      </div>
        <div class="block" style="float:right;margin-bottom:10px">
          <span class="demonstration"></span>
          <el-pagination
            :current-page.sync="page"
            :page-size="10"
            layout="total, prev, pager, next"
            :total="total"
          ></el-pagination>
        </div>
    </el-card>
    <el-dialog title="货品详情" :visible.sync="dialogFormVisible" width="570px" :center="true">
      <el-form :inline="true" class="demo-form-inline" label-width="100px">
        <el-row>
          <el-col :span="12">
            <el-form-item label="货品名称">
              <el-input v-model="form.goodsName" disabled></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="货品编号">
              <el-input v-model="form.goodsId01" disabled></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="所在仓库">
              <el-input
                v-model="goodsWareHouse[form.wareHouse]"
                disabled
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="货品型号">
              <el-input v-model="form.specification" disabled></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="入库时间">
              <el-date-picker
                v-model="form.inboundTime"
                disabled
                type="date"
                format="yyyyMMdd"
                value-format="yyyyMMdd"
              ></el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="保存期限">
              <el-date-picker
                v-model="form.goodsPrime"
                disabled
                type="date"
                format="yyyyMMdd"
                value-format="yyyyMMdd"
              ></el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="货品数量">
              <el-input v-model="form.goodsNum" disabled></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="最低库存数">
              <el-input v-model="waringValue"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="axiosUpdate(form.goodsId01)"
          >确 定</el-button
        >
      </div>
    </el-dialog>
    <el-dialog title="打印" :visible.sync="printShow" v-if="printShow">
      <div class="tabZujian">
        <el-tabs v-model="activeName">
            <el-tab-pane label="二维码" name="first" :key="'first'">
            </el-tab-pane>
            <el-tab-pane label="条形码" name="second" :key="'second'">
            </el-tab-pane>
        </el-tabs>
      </div>
      <div v-if="activeName === 'first'">
        <div style="text-align: center;margin-bottom: 10px;">
          <el-radio-group v-model="printKey">
            <el-radio-button label="lg">80 * 50</el-radio-button>
            <el-radio-button label="md">80 * 25</el-radio-button>
            <el-radio-button label="sm">40 * 25</el-radio-button>
          </el-radio-group>
        </div>
        <div
          class="printBox"
          :style="`height: ${printClass[printKey].height}`"
          id="print"
        >
          <div :class="printKey">
            <div
              :style="
                `margin-right: 10px;margin-top:12px;font-size: ${printClass[printKey].fontSize}`
              "
            >
              <p>货品名称: {{ newlist[selectIdx].goodsName }}</p>
              <p>货品编号: {{ newlist[selectIdx].goodsId01 }}</p>
              <p>规格型号: {{ newlist[selectIdx].specification }}</p>
            </div>
            <div>
              <vue-qr
                :ref="newlist[selectIdx].goodsId01"
                :text="newlist[selectIdx].fBarCode"
                :correctLevel="3"
                :size="printClass[printKey].size"
                :margin="10"
                colorDark="#000"
                colorLight="white"
                backgroundColor="white"
                backgroundDimming="white"
                :logoSrc="require('@/assets/qrcode.png')"
                :logoScale="0.2"
                :logoMargin="2"
                style="margin-top:20px;"
                logoBackgroundColor="white"
              ></vue-qr>
            </div>
          </div>
        </div>
      </div>
      <div v-else id="print">
        <div style="margin:auto" class="printBox" >
          <barcode id="print" :value="tableData[selectIdx].goodsId01" :options="barcode_option" tag="svg" ></barcode>
          <div style="margin-top:-20px;font-size:14px;">
            <p>货品名称: {{ newlist[selectIdx].goodsName }}</p>
            <p>货品编号: {{ newlist[selectIdx].goodsId01 }}</p>
            <p>规格型号: {{ newlist[selectIdx].specification }}</p>
          </div>
        </div>
      </div>
      <div style="margin-top: 30px; text-align: center;">
        <el-button type="primary" v-print="printObj">打印</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { table } from "@/mixin/table";
import vueQr from "vue-qr";
import html2canvas from "html2canvas";
import FileSaver from "file-saver";
export default {
  mixins: [table],
  components: {
    vueQr
  },
  data: () => ({
    barcode_option: {
      displayValue: true, //是否默认显示条形码数据
      //textPosition  :'top', //条形码数据显示的位置
      background: '#fff', //条形码背景颜色
      valid: function (valid) {
        console.log(valid)
      },
      width: '2px',
      height: '60px',
      fontSize: '18px' //字体大小
    },
    activeName: "first",
    page: 1,
    query: {
      goodsName: "",
      goodsUnit: "",
      inboundTime: "",
      // status: 3,
      warehouse: 2,
      currentPage: 1,
      pageSize: 10,
      month: "",
      year: ""
    },
    show: true,
    printShow: false,
    fBarCode: null,
    type: 1,
    currentPage: 10,
    total: 0,
    waringValue: null,
    StockTypeOpt: [
      { index: 1, value: "全部" },
      { index: 2, value: "过期货物" },
      { index: 3, value: "低库存" },
      { index: 4, value: "损坏" },
      { index: 5, value: "未填报最低库存" }
    ],
    month: "",
    years: "",
    inboundTime: "",
    dialogFormVisible: false,
    form: {},
    canvasImageUrl: null,
    printStyle: {
      h50: true
    },
    selectIdx: 0,
    printClass: {
      lg: {
        size: 150,
        fontSize: "14px",
        height: "120px"
      },
      md: {
        size: 130,
        fontSize: "14px",
        height: "110px"
      },
      sm: {
        size: 100,
        fontSize: "11px",
        height: "90px"
      }
    },
    printKey: "lg",
    printObj: {
      id: "print"
    }
  }),
  create() {
    console.log(this.goodsStatus);
  },
  mounted () {
    this.fetch()
  },
  watch: {
    type() {
      this.fetch();
    },
    inboundTime() {
      this.fetch();
    },
    printShow() {
      this.printKey = "lg";
    },
    years () {
      this.fetch()
    },
  },
  directives: {
    focus: {
      inserted(el) {
        el.focus();
      }
    }
  },
  methods: {
    async fetch() {
      try {
        this.tableData = [];
        this.query.inboundTime = this.inboundTime;
        this.query.year = this.years;
        this.query.month = this.month;
        const res = await this.$http.post(
          `/restful/v1/dd/goods/getGoodsList?type=${this.type}`,
          this.query
        );
        if (res.data.code === 1 && res.data.object) {
          this.total = res.data.object.dataList.length
          const obj = res.data.object.dataList;
          for (var i = 0; i < obj.length; i++) {
            obj[i].fBarCode = `http://218.95.70.237:8090/index.html#/qrcode?goodsId=${obj[i].goodsId01}&wareHouse=2`;
            // obj[i].fBarCode = `http://192.168.220.197:8090/#/qrcode?goodsId=${obj[i].goodsId01}&wareHouse=1`
          }
          this.tableData = obj;
        } else {
          this.tableData = [];
          this.total = 0;
        }
      } catch (error) {
        this.$message.error("服务器繁忙");
        this.tableData = [];
        this.total = 0;
      }
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.query.pageSize = val;
      this.fetch();
    },
    handleShow(obj) {
      this.dialogFormVisible = true;
      this.form = obj;
    },
    async axiosUpdate(id) {
      if (this.waringValue) {
        const res = await this.$http.post(
          `/restful/v1/dd/goods/settingWaringValueInfo?waringValue=${this.waringValue}&goodsId=${id}&wareHouse=2`
        );
        if (res.data.code === 1) {
          this.fetch();
          this.dialogFormVisible = false;
          this.waringValue = null;
          this.$message({
            type: "success",
            message: "修改成功"
          });
        }
      }
    },
    handle (type, id) {
      this.$router.push({
        path: `/home/storehouse1/operation${type}`,
        query: {
          id,
          warehouse: 2
        }
      });
    },
    async handleDow () {
      const { data } = await this.$http.get(
        `/restful/v1/dd/goods/exportGoodsInfo?type=${this.type}&goodsName=${this.query.goodsName}&goodsUnit=${this.query.goodsUnit}&inboundTime=${this.query.inboundTime}&year=${this.query.year}&month=${this.query.month}&wareHouse=2`,
        {
          responseType: "blob"
        }
      );
      try {
        FileSaver.saveAs(
          new Blob([data], { type: "application/octet-stream" }),
          `货品列表.xls`
        );
      } catch (error) {
        this.$message.error("服务器繁忙");
        console.log(111111, error.message);
      }
    },
  },
  computed: {
    newlist() {
      return this.tableData.slice((this.page - 1) * 10, this.page * 10);
    }
  },
};
</script>
<style lang="less" scoped>
.qrcode {
  padding: 10px;
  div {
    margin-top: 5px;
    padding-left: 5px;
  }
  div:nth-child(1) {
    margin: 0;
    padding: 0;
  }
}
.printBox {
  display: flex;
  justify-content: center;
  align-items: center;

  .lg,
  .md,
  .sm {
    display: flex;
    align-items: center;
  }
  p {
    margin: 0;
  }
}
.w80 {
  width: 80px;
}
.w40 {
  width: 40px;
}
.h50 {
  width: 50px;
}
.h25 {
  height: 25;
}
@page {
  margin-top: 2mm; //去掉页眉
  margin-bottom: 2mm; //去掉页脚
}
</style>
